import { VC, Component } from '@/VC-vue'
import './index.styl'
import { getRuleKind, searchResult } from '../../services/control'
import { parseTime } from '../../utils/common'
import { Toast } from 'mand-mobile'
import noDataImg from './../../assets/img/no-data.png'

@Component({})
export default class Done extends VC {
    public $refs!: {
        scrollView: any
    }
    isDatePickerShow: boolean = false
    datePickerValue: string = ''
    isDateShow: boolean = false
    showRule: boolean = false
    dateOpt: any = {
        minDate: new Date('2013/9/9'),
        maxDate: new Date('2100/9/9'),
        currentDate: new Date()
    }
    ruleKinds: any[] = []
    ruleName: string = ''
    editInfo: any = {}
    itemList: any[] = []
    noData: boolean = false

    // page
    isFinished: boolean = false
    total: number = 0
    pager: any = {
        startPage: 1,
        pageSize: 5
    }
    taskInfo: any = {}

    _doSearch() {
        this.editInfo = Object.assign(this.editInfo, this.pager)
        Toast.loading('搜索中...')
        return new Promise((resolve, reject) => {
            searchResult(this.editInfo)
                .then((res: any) => {
                    if (res.data.retCode == 0) {
                        if (res.data.retData.length <= 0) {
                            this.noData = true
                        }
                        this.itemList = res.data.retData || []
                        this.total = res.data.totalNum
                        this.isFinished = true
                        this.$refs.scrollView.reflowScroller()
                        Toast.hide()
                        resolve(true)
                    } else {
                        Toast.failed(res.data.retMessage)
                        this.noData = true
                        this.isFinished = true
                    }
                })
                .catch(err => {
                    reject(err)
                })
        })
    }

    reset() {
        this.editInfo = {}
        this.pager = {
            startPage: 1,
            pageSize: 5
        }
        this.itemList = []
        this.isFinished = true
    }

    async _onEndReached() {
        if (this.isFinished) {
            return
        }
        // async data
        if (this.pager.pageSize >= this.total) {
            this.isFinished = true
            this.$refs.scrollView.finishLoadMore()
        } else {
            this.pager.pageSize += 5
            const result = await this._doSearch()
            if (result) {
                this.$refs.scrollView.finishLoadMore()
            }
        }
    }

    chooseKind(e: any) {
        this.ruleName = e.text
        this.editInfo.ruleKindId = e.value
    }

    chooseStart(value: any) {
        const year = value[0].value
        let month = value[1].value
        let day = value[2].value
        if (month < 10) {
            month = '0' + month
        }
        if (day < 10) {
            day = '0' + day
        }
        const time = year + '-' + month + '-' + day
        const cur = new Date(time)
        this.editInfo.startTime = parseTime(cur, '{y}-{m}-{d}')
    }
    chooseEnd(value: any) {
        const year = value[0].value
        let month = value[1].value
        let day = value[2].value
        if (month < 10) {
            month = '0' + month
        }
        if (day < 10) {
            day = '0' + day
        }
        const time = year + '-' + month + '-' + day
        const cur = new Date(time)
        this.editInfo.endTime = parseTime(cur, '{y}-{m}-{d}')
    }

    showRulePicker() {
        this.showRule = true
    }

    init() {
        getRuleKind().then(r => {
            const curList: any[] = []
            r.data &&
                r.data.map((item: any) => {
                    const obj = {
                        value: item.ruleKindId,
                        text: item.ruleKindName
                    }
                    curList.push(obj)
                })
            this.ruleKinds = curList
        })
    }

    mounted() {
        this.init()
    }

    showDatePicker(type: string) {
        type == 'start'
            ? (this.isDatePickerShow = true)
            : (this.isDateShow = true)
    }

    renderSearch() {
        return (
            <div class="search-main">
                <md-field>
                    <md-input-item
                        ref="name"
                        title="姓名"
                        placeholder="请输入姓名"
                        v-model={this.editInfo.patientName}
                    />
                    <md-input-item
                        ref="bah"
                        title="病案号"
                        placeholder="请输入病案号"
                        v-model={this.editInfo.bah}
                    />
                </md-field>
            </div>
        )
    }

    renderPopup() {
        return (
            <div>
                <md-date-picker
                    ref="datePicker"
                    v-model={this.isDatePickerShow}
                    today-text="今天"
                    min-date={this.dateOpt.minDate}
                    max-date={this.dateOpt.maxDate}
                    default-date={this.dateOpt.currentDate}
                    onconfirm={this.chooseStart}
                />
                <md-date-picker
                    ref="datePicker"
                    v-model={this.isDateShow}
                    today-text="今天"
                    min-date={this.dateOpt.minDate}
                    max-date={this.dateOpt.maxDate}
                    default-date={this.dateOpt.currentDate}
                    onconfirm={this.chooseEnd}
                />
                <md-selector
                    v-model={this.showRule}
                    data={this.ruleKinds}
                    max-height="320px"
                    title="规则大类"
                    onchoose={this.chooseKind}
                />
            </div>
        )
    }

    renderTop() {
        return (
            <div class="top-main">
                <div class="top-item" onclick={this.showRulePicker}>
                    <span style={this.ruleName && 'color:#2f86f6'}>
                        {this.ruleName || '选择规则大类'}
                    </span>
                    <md-icon name="arrow-down" size="small" />
                </div>
                <div
                    class="top-item"
                    onclick={this.showDatePicker.bind(this, 'start')}
                >
                    <span style={this.editInfo.startTime && 'color:#2f86f6'}>
                        {this.editInfo.startTime || '开始时间'}
                    </span>
                    <md-icon name="arrow-down" size="small" />
                </div>
                <div
                    class="top-item"
                    onclick={this.showDatePicker.bind(this, 'end')}
                >
                    <span style={this.editInfo.endTime && 'color:#2f86f6'}>
                        {this.editInfo.endTime || '结束时间'}
                    </span>
                    <md-icon name="arrow-down" size="small" />
                </div>
            </div>
        )
    }
    renderItem(res?: any, needMargin?: boolean) {
        return (
            <div class="list-item" style={needMargin && 'margin-bottom:0'}>
                <div class="header-slot is-flex" slot="header">
                    <p class="desc">规则名称：{res.ruleName}</p>
                </div>
                <div class="item-main">
                    <md-detail-item title="患者姓名">
                        {res.patientName}
                    </md-detail-item>
                    <md-detail-item title="规则大类">
                        {res.ruleKindName}
                    </md-detail-item>
                    <md-detail-item title="病案号">{res.bah}</md-detail-item>
                    <md-detail-item title="质控动作">
                        {res.actionType == 1 ? '质控' : '提醒'}
                    </md-detail-item>
                    <md-detail-item title="住院号">
                        {res.patientNo}
                    </md-detail-item>
                    <md-detail-item class="diy_item" title="质控结果说明">
                        {res.qcRemark}
                    </md-detail-item>
                </div>
            </div>
        )
    }

    renderIndex() {
        return this.noData ? (
            <div class="no-data">
                <img src={noDataImg} />
                <p>暂无质控记录</p>
            </div>
        ) : (
            <div class="result-list">
                {this.itemList &&
                    this.itemList.map((res: any, index: any) => {
                        if (index >= this.itemList.length - 1) {
                            return this.renderItem(res, true)
                        } else {
                            return this.renderItem(res)
                        }
                    })}
                {this.itemList.length > 0 && (
                    <md-scroll-view-more
                        slot="more"
                        is-finished={this.isFinished}
                    />
                )}
            </div>
        )
    }

    render() {
        return (
            <div>
                {this.renderTop()}
                {this.renderPopup()}
                <md-scroll-view
                    ref="scrollView"
                    scrolling-x={false}
                    class="search-container"
                    onendReached={this._onEndReached}
                    style="top: 0"
                >
                    {this.renderSearch()}
                    <div class="search-btn">
                        <md-button
                            type="warning"
                            icon="refresh"
                            inline
                            size="small"
                            style="margin-right:20px"
                            onclick={this.reset}
                        >
                            重置
                        </md-button>
                        <md-button
                            onclick={this._doSearch}
                            type="primary"
                            icon="search"
                            inline
                            size="small"
                        >
                            搜索
                        </md-button>
                    </div>
                    {this.renderIndex()}
                </md-scroll-view>
            </div>
        )
    }
}
